<template>
  <div class="guardcat-info-root">
    <el-descriptions :column="2" title="GuardCat 服务配置">
      <el-descriptions-item label="存储类型:">
        <el-tag>{{ systemInfo.guardcat.repoType }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="拉取间隔:">
        <el-tag>{{ systemInfo.guardcat.fetchMachineInterval }}ms</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { guardcatInfoApi } from "@/api/guardcat";

const systemInfo = ref<any>({
  guardcat: {}
});
const getGuardcatInfo = () => {
  guardcatInfoApi().then(resp => {
    systemInfo.value.guardcat = resp.data
  })
}

onMounted(() => {
  getGuardcatInfo();
})

</script>

<style scoped lang="scss">
.guardcat-info-root {
  @include box(100%, 100%);

  :deep(.el-descriptions__title) {
    color: var(--el-color-primary);
  }

  :deep(.el-descriptions__label) {
    color: var(--el-text-color-regular);
    font-weight: bold;
  }
}
</style>